<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CanvasDemo</title>
</head>
<body>

	<canvas id="myCanvas" width="500" height="500"></canvas>


</body>
<script type="text/javascript">
		var cas = document.getElementById("myCanvas");
		var c = cas.getContext("2d");
		c.save();
		c.beginPath();
		c.moveTo(20,20);
		c.lineTo(70,70);
		c.lineTo(20,70);
		c.stroke();
		c.fillStyle = "#CC99FF"; //我最喜欢的颜色之一
// 		c.fillStyle = "#C9F"; 
		c.fill();;
		c.beginPath();
		c.moveTo(80,80);
		c.lineTo(100,100);
		c.lineTo(80,100);
		c.closePath();
// 		c.lineTo(150,150);
		//--设置阴影
		c.shadowColor = "gray";
		c.shadowOffsetX = "2";			
		c.shadowOffsetY = "2";			
		
		
		//--设置阴影
		
		c.strokeStyle="red";
		c.lineWidth = "4";
		c.stroke();
		c.beginPath();
		c.moveTo(150,150);
		c.fill();
		c.stroke();
		c.save();
		

		c.beginPath();
		var linearGradient = c.createLinearGradient(200,200,500,500);
		linearGradient.addColorStop(0.0,"red");
		linearGradient.addColorStop(1.0,"blue");
		c.strokeStyle = linearGradient;
		c.fillStyle = linearGradient;
		c.strokeRect(200,200,100,100);
		c.fillRect(200,200,100,100);
		c.linewidth = 1;
		c.font="Bold 300px Arial";
		c.restore();
		
		c.strokeText("韩菲",350,350);
		

		
</script>
</html>